<template>
  <image v-if="src" class="w-image" :mode="mode" :style="style" :src="src" @error="onerror" @load="onload">
</template>

<script>
import errorSrc from '@/static/images/img-error.svg';

/**
 * 网络图片资源在后台项目的static/images/weixin/中
 */
export default {
  props: {
    mode: {
      type: String,
      default: null
    },
    style: {
      type: Object,
      default: () => ({})
    },
    name: {
      type: String,
      default: null
    },
    showError: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    error: false
  }),
  computed: {
    src() {
      if (this.error && this.showError) return errorSrc;
      if (this.name) {
        // https://dpc.way-s.cn/admin/test/static/images/weixin/sign-in.png
        return uni.$http.wImgBaseURL + this.name;
      }
      return '';
    }
  },
  methods: {
    onload() {
      this.$emit('onload');
    },
    onerror(e) {
      console.log('onerror', e);
      this.error = true;
      this.$emit('onload');
    }
  },
};
</script>

<style lang="less" scoped>
.w-image {
  width: 100%;
  height: 100%;
}
</style>
